<script setup>
import { ref, } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Basic } from '@/api';
let route = useRoute();
let router = useRouter();
let input1 = ref('');

let handle_remove=()=>{
    ElMessageBox.confirm(
        '是否确认退出登录?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(async () => {
            let { status, msg } = await Basic.logout();
            if (status == 200) {
                ElMessage.success(msg);
                router.push('/')
                sessionStorage.token = '';
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}
</script>

<template>
    <div class="title">
        <div>
            <el-icon>
                <Expand />
            </el-icon>
            <span :icon="`${route.meta.icon}`">
                {{ route.meta.route_p_name }}
                <span v-show="route.meta.route_p_name">/</span>
                {{ route.meta.route_name }}
            </span>

        </div>
        <div class="title-l">
            <el-input v-model="input1" class="title-input" placeholder="菜单搜索" />
            <el-icon>
                <FullScreen />
            </el-icon>
            <el-icon>
                <Refresh />
            </el-icon>
            <el-icon>
                <Bell />
            </el-icon>
            <span><el-dropdown>
                    admin
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handle_remove">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown></span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.title {
    display: flex;
    padding-top: 10px;
    justify-content: space-between;
    align-items: center;

    .title-l {
        width: 350px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;

        .title-input {
            width: 200px;
        }
    }
}
</style>